<template>
    <div class="notice-list">
        <common-list @resert="resert" ref="commonListRef">
            <template #state="{ scope }">
                <div class="state" :style="{ color: stateName[scope.scope.row.state - 1]?.fontColor, background: stateName[scope.scope.row.state - 1]?.bgColor }">
                    {{ scope.scope.row.stateName }}
                </div>
            </template>
            <template #startDate="{ scope }">
                {{ dayjs(scope.scope.row.startDate).format("YYYY-MM-DD") }}
            </template>
            <template #operate="{ scope }">
                <el-button link type="primary" size="small" @click="handler(scope.scope.row, 0)" v-if="scope.scope.row.state === 1 && store.btns.find((item) => item.name === '处理')">处理</el-button>
                <el-button link type="primary" size="small" @click="handler(scope.scope.row, 1)" v-else-if="store.btns.find((item) => item.name === '查看')">查看</el-button>
            </template>
        </common-list>
    </div>
</template>

<script setup>
import { provide, reactive, ref, watch } from "vue";
import { tableConfig, formConfig } from "./config";
import { getMaintenanceList, getAreaPosition, getAreaDevice, getDpt } from "@/service/api/maintenance.js";
import { getReportDist } from "@/service/api/report.js";
import { useRouter, useRoute } from "vue-router";
import { mainStore } from "@/store/main.js";
import { useMaintenance } from "@/store/maintenance.js";
import dayjs from "dayjs";
const maintenanceStore = useMaintenance();
const store = mainStore();
const router = useRouter();
const route = useRoute();
const commonListRef = ref(null);
const formData = reactive({ areaLocation: "", equipmentId: "", major: "", type: "", responsibleDepartment: "", state: "" });
const stateName = [
    { name: "待实施", fontColor: "#FA6400", bgColor: "rgba(250,173,20,0.2)" },
    { name: "已完成", fontColor: "#A0D911", bgColor: "rgba(160,217,17,0.2)" },
    { name: "已报修", fontColor: "#FFC53F", bgColor: "rgba(255,197,63,0.2)" }
];
if (route.query.areaLocation && route.query.equipmentId) {
    formData.areaLocation = route.query.areaLocation;
    formData.equipmentId = route.query.equipmentId;
    getAreaDevice({
        areaLocation: route.query.areaLocation
    }).then((res) => {
        if (res.code === 200) {
            formConfig.value[1].options = res.data.map((item) => ({ label: item.equipmentObject, value: item.equipmentId }));
        }
    });
}
const api = [
    { api: getAreaPosition, index: 0 },
    { api: getDpt, index: 2 },
    { api: getReportDist, index: 3, name: "Order_Maintenanceorderdetail_State" },
    { api: getReportDist, index: 4, name: "Order_Maintenanceorderdetail_Major" },
    { api: getReportDist, index: 5, name: "Maintain_Type" }
];
getApiData();

function getApiData() {
    api.forEach((item) => {
        item.api({ parentCode: item.name }).then((res) => {
            if (res.code === 200) {
                formConfig.value[item.index].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    });
}
watch(
    () => formData.areaLocation,
    (newVal) => {
        if (!newVal) return;
        formData.equipmentId = "";
        formConfig.value[1].options = [];
        getAreaDevice({
            areaLocation: newVal
        }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.equipmentObject, value: item.equipmentId }));
            }
        });
    }
);
const handler = (row, state) => {
    maintenanceStore.stateOperation = state;
    store.tableData = row;
    router.push("/main/maintenanceManage/maintenanceDetail");
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getMaintenanceList);
provide("title", "维保明细");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    .state {
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
    }
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .add-btn,
        .config-btn {
            width: 106px;
            height: 32px;
        }
    }
}
</style>
